<template>
  <div class="violation-detail">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="案件ID">{{ record.id }}</el-descriptions-item>
      <el-descriptions-item label="车牌号码">{{ record.carId || '无法识别' }}</el-descriptions-item>
      <el-descriptions-item label="违法类型">
        <el-tag :type="getViolationTypeTag(record.violationType)">
          {{ getViolationTypeName(record.violationType) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="违法时间">{{ formatDateTime(record.createTime) }}</el-descriptions-item>
      <el-descriptions-item label="违法地点">{{ record.location }}</el-descriptions-item>
      <el-descriptions-item label="当前状态">
        <el-tag :type="getStatusTag(record.status)">
          {{ record.status === 0 ? '未读' : '已读' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="预警等级">
        <el-tag :type="getWarningLevelType(record.warningLevel)">
          {{ getWarningLevelName(record.warningLevel) }}
        </el-tag>
      </el-descriptions-item>
      <!-- 证据图片展示 -->
      <el-descriptions-item label="证据图片" :span="2" v-if="record.imagePath || (record.evidenceImages && record.evidenceImages.length > 0)">
        <div class="evidence-images">
          <el-image 
            v-if="record.imagePath" 
            :src="record.imagePath"
            :preview-src-list="[record.imagePath]"
            fit="cover" 
            class="evidence-image" />
          <el-image 
            v-for="(img, index) in record.evidenceImages" 
            :key="index" 
            :src="img"
            :preview-src-list="record.evidenceImages" 
            fit="cover" 
            class="evidence-image" />
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="违法描述" :span="2">{{ record.description }}</el-descriptions-item>
      <el-descriptions-item label="处理意见" :span="2" v-if="record.status !== 0">
        {{ record.processOpinion || '暂无处理意见' }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup>
import { formatDateTime } from '@/utils/date'

const props = defineProps({
  record: {
    type: Object,
    required: true,
    default: () => ({})
  }
})

const getViolationTypeName = (type) => {
  const typeMap = {
    1: '超速',
    2: '违规转弯',
    3: '压线',
    4: '机动车闯红灯',
    5: '行人闯红灯'
  }
  return typeMap[type] || `未知类型(${type})`
}

const getViolationTypeTag = (type) => {
  const map = {
    1: 'warning',  // 超速
    2: 'info',     // 违规转弯
    3: 'info',     // 压线
    4: 'danger',   // 机动车闯红灯
    5: 'warning'   // 行人闯红灯
  }
  return map[type] || 'info'
}

const getStatusTag = (status) => {
  return status === 0 ? 'danger' : 'success'
}

const getWarningLevelName = (level) => {
  const levelMap = {
    1: '低',
    2: '中', 
    3: '高'
  }
  return levelMap[level] || '未知'
}

const getWarningLevelType = (level) => {
  const typeMap = {
    1: 'info',    // 低 - 蓝色
    2: 'warning', // 中 - 橙色
    3: 'danger'   // 高 - 红色
  }
  return typeMap[level] || 'info'
}
</script>

<style scoped>
.violation-detail {
  padding: 20px;
}

.evidence-images {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.evidence-image {
  width: 150px;
  height: 100px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.3s;
}

.evidence-image:hover {
  transform: scale(1.02);
}
</style>